<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        body {
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            display: -webkit-flex;
            display: flex;
            justify-content: center;
        }

        div {
            width: 200px;
            height: 400px;
            border: 1px solid royalblue;
        }

        ul>li:not(:last-child)::after {
            content: ",";
        }


        li {
            display: none;
        }

        /* select items 1 through 3 and display them */
        li:nth-child(-n+3) {
            display: block;
        }

        .test3 span {
            position: relative;
        }

        .test3 span a {
            position: relative;
            z-index: 2;
        }

        .test3 span a:hover,
        .test3 span a:active {
            z-index: 4;
        }

        .test3 span input {
            background: transparent;
            border: 0;
            cursor: pointer;
            position: absolute;
            top: -1px;
            left: 0;
            width: 101%;
            /* Hacky */
            height: 301%;
            /* Hacky */
            z-index: 3;
        }

        .test3 span input:focus {
            background: transparent;
            border: 0;
            z-index: 1;
        }

        a[href^="http"]:empty::before {
            content: attr(href);
        }

        h1[data-text] {
            position: relative;
        }

        h1[data-text]::after {
            content: attr(data-text);
            z-index: 10;
            color: #e3e3e3;
            position: absolute;
            top: 0;
            left: 0;
            -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), color-stop(50%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        }

        .disabled {
            pointer-events: none;
        }

        .blur {
            color: transparent;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>

<body>
    <div>
        <h1 data-text="列表">列表</h1>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
            <li>列表6</li>
            <li>列表7</li>
        </ul>
    </div>
    <div class="test3">
        <h1 data-text="链接">链接</h1>
        <span>
            <input type="text" value=" " readonly="true" />
            <a href="http://renpingjun.com">Double click me</a>
        </span>
    </div>
    <div>
        <h1 data-text="空的a标签">空的a标签</h1>
        <a href="https://www.baidu.com"></a>
    </div>
    <div>
        <h1 data-text="无法点击的a标签">无法点击的a标签</h1>
        <a class="disabled" href="https://www.baidu.com"></a>
    </div>
    <div>
        <h1 data-text="文本模糊效果">文本模糊效果</h1>
        <span class="blur">简单但很漂亮的文本模糊效果，简单又好看！</span>
    </div>
</body>

</html>